<template>
	<div class="HostInformation">
		<el-row class="hostLine-box">
			<el-col :span="5" class="itemStart">
				<p class="oneLable">IP 地址:</p>
			</el-col>
			<el-col :span="8" style="border-right:2px solid rgb(4, 44, 119);" class="itemStart">
				<p class="lableNumber">
					{{ selectedMonID.selectedIP ? selectedMonID.selectedIP : " " }}
				</p>
			</el-col>
			<el-col :span="5" class="itemStart">
				<p class="oneLable">端口:</p>
			</el-col>
			<el-col :span="5" class="itemStart">
				<p class="lableNumber">
					{{ osData.PORT ? osData.PORT : " " }}
				</p>
			</el-col>
		</el-row>
		<el-row class="hostLine-box">
			<el-col :span="5" class="itemStart">
				<p class="oneLable">平台信息:</p>
			</el-col>
			<el-col :span="8" style="border-right:2px solid rgb(4, 44, 119);" class="itemStart">
				<p class="lableNumber">
					{{ dbData.OPEN_MODE ? dbData.OPEN_MODE : " " }}
				</p>
			</el-col>
			<el-col :span="6" class="itemStart">
				<p class="oneLable">数据库版本:</p>
			</el-col>
			<el-col :span="5" class="itemStart">
				<p class="lableNumber">
					{{ dbData.DB_VERSION ? dbData.DB_VERSION : " " }}
				</p>
			</el-col>
		</el-row>
		<el-row class="hostLine-box">
			<el-col :span="6" class="itemStart">
				<p class="oneLable">启动时间:</p>
			</el-col>
			<el-col :span="18" class="itemStart">
				<p class="lableNumber">
					{{ dbData.STARTUP_TIME ? dbData.STARTUP_TIME : " " }}
				</p>
			</el-col>
		</el-row>
		<el-row class="hostLine-box">
			<el-col :span="8" class="itemStart">
				<p class="oneLable">内存使用率:</p>
			</el-col>
			<el-col :span="4" style="border-right:2px solid rgb(4, 44, 119);" class="itemStart">
				<p class="lableNumber">
					{{
            osData.MEMORYUSEDPER_GB
              ? calcCheng(osData.MEMORYUSEDPER_GB, 100).toFixed(0) + "%"
              : "0" + "%"
          }}
				</p>
			</el-col>
			<el-col :span="8" class="itemStart">
				<p class="oneLable">CPU使用率:</p>
			</el-col>
			<el-col :span="4" class="itemStart">
				<p class="lableNumber">
					{{
            osData.CPU_ALLUSED
              ? calcCheng(osData.CPU_ALLUSED, 100).toFixed(0) + "%"
              : "0" + "%"
          }}
				</p>
			</el-col>
		</el-row>
		<el-row class="hostEcharts-box">
			<el-col :span="24" class="hostEcharts">
				<div ref="EChartsMemory" class="memory"></div>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import bus from "common/bus.js";

	export default {
		data() {
			return {
				postData: {
					opera: "dbpanlinfo",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						monid: "",
					},
				},
				postOSData: {
					opera: "ospanlinfo",
					curPage: 1,
					pageSize: 20,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						monid: "",
					},
				},
				ip: "",
				cpuUsage: "",
				memoryUsage: "",
				dbVersion: "",
				openMode: "",
				startTime: "",
				timerName: "HostInformation",
				timerEventName: "timerHostInformation",
				timerInterval: 1000 * 10,
				EChartsMemory: {},
				EChartsOption: {
					series: [{
							radius: "80%",
							name: "内存使用率",
							center: ["25%", "48%"],
							type: "gauge",
							axisLine: {
								lineStyle: {
									width: 5,
									color: [
										[0.3, "#67C23A"],
										[0.7, "#409EFF"],
										[1, "#f56c6c"]
									],
								},
							},
							pointer: {
								width: 1.5,
								itemStyle: {
									color: "auto",
								},
							},
							axisTick: {
								distance: -4,
								length: 1,
								lineStyle: {
									color: "#ddd",
									width: 1,
								},
							},
							splitLine: {
								distance: -4,
								length: 4,
								lineStyle: {
									color: "#fff",
									width: 1,
								},
							},
							axisLabel: {
								color: "auto",
								distance: 8,
								fontSize: 6,
							},
							detail: {
								valueAnimation: true,
								formatter: "{value} %",
								color: "auto",
								fontSize: 10,
							},
							data: [{
								value: 0,
							}, ],
						},
						{
							radius: "80%",
							name: "CPU使用率",
							center: ["75%", "48%"],
							type: "gauge",
							axisLine: {
								lineStyle: {
									width: 5,
									color: [
										[0.3, "#67C23A"],
										[0.7, "#409EFF"],
										[1, "#f56c6c"]
									],
								},
							},
							pointer: {
								width: 1.5,
								itemStyle: {
									color: "auto",
								},
							},
							axisTick: {
								distance: -4,
								length: 1,
								lineStyle: {
									color: "#ddd",
									width: 1,
								},
							},
							splitLine: {
								distance: -4,
								length: 4,
								lineStyle: {
									color: "#fff",
									width: 1,
								},
							},
							axisLabel: {
								color: "auto",
								distance: 8,
								fontSize: 6,
							},
							detail: {
								valueAnimation: true,
								formatter: "{value}%",
								color: "auto",
								fontSize: 10,
							},
							data: [{
								value: 0,
							}, ],
						},
					],
				},
				selectedMonID: {},
				dbData: {},
				osData: {},
			};
		},
		created() {
			bus.$on("selectedMonID", (msg) => {
				this.resetData();

				this.selectedMonID = msg;
				this.postData.filters.monid = this.selectedMonID.selectedDBMonID;
				this.getData();

				if (this.selectedMonID.hasOwnProperty("selectedOSMonID")) {
					this.postOSData.filters.monid = this.selectedMonID.selectedOSMonID;
					this.getOSData();
				} else {
					this.drawMemoryLine();
				}
			});

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});

			bus.$on(this.timerEventName, (msg) => {
				if (msg.isGetData) {
					// this.resetData();

					this.getData();

					if (this.selectedMonID.hasOwnProperty("selectedOSMonID")) {
						this.postOSData.filters.monid = this.selectedMonID.selectedOSMonID;
						this.getOSData();
					} else {
						this.drawMemoryLine();
					}
				}
			});
		},
		mounted() {
			this.EChartsMemory = this.$echarts.init(this.$refs.EChartsMemory);
			this.drawMemoryLine();
			window.onresize = () => {
				let myEchart = this.$echarts.init(this.$refs.EChartsMemory);
				myEchart.resize();
			};
		},
		computed: {
			postDataFn() {
				return {
					postData: JSON.stringify(this.postData),
				};
			},
			postOSDataFn() {
				return {
					postData: JSON.stringify(this.postOSData),
				};
			},
		},
		methods: {
			getData() {
				fetchData(this.postDataFn).then((res) => {
					if (res.data.length > 0) {
						this.dbData = res.data[0];
					}
				});
			},
			getOSData() {
				fetchData(this.postOSDataFn).then((res) => {
					if (res.data.length > 0) {
						this.osData = res.data[0];

						if (this.osData.MEMORYUSEDPER_GB != null) {
							this.EChartsOption.series[0].data[0].value = this.calcCheng(
								this.osData.MEMORYUSEDPER_GB,
								100
							).toFixed(0);
						} else {
							this.EChartsOption.series[0].data[0].value = 0;
						}

						if (this.osData.CPU_ALLUSED != null) {
							this.EChartsOption.series[1].data[0].value = this.calcCheng(
								this.osData.CPU_ALLUSED,
								100
							).toFixed(0);
						} else {
							this.EChartsOption.series[1].data[0].value = 0;
						}
					}
					this.drawMemoryLine();
				});
			},
			drawMemoryLine() {
				this.EChartsMemory.setOption(this.EChartsOption, true);
			},
			resetData() {
				this.dbData = {};
				this.osData = {};
				this.EChartsOption.series[0].data[0].value = 0;
				this.EChartsOption.series[1].data[0].value = 0;
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});

			this.EChartsMemory.dispose();
		},
		watch: {},
	};
</script>

<style scoped>
	@media screen and (max-width: 1365px) and (min-width: 1280px) {
		.oneLable {
			font-size: 12px !important;
		}

		.lableNumber {
			font-size: 10px !important;
		}
	}

	@media screen and (max-width: 1600px) and (min-width: 1365px) {
		.oneLable {
			font-size: 12px !important;
		}

		.lableNumber {
			font-size: 10px !important;
		}
	}

	@media screen and (max-width: 1778px) and (min-width: 1600px) {
		.lableNumber {
			font-size: 12px !important;
		}
	}

	@media screen and (max-width: 1920px) and (min-width: 1778px) {
		.lableNumber {
			font-size: 12px !important;
		}
	}

	@media screen and (max-width: 2560px) and (min-width: 1920px) {
		.lableNumber {
			font-size: 14px !important;
		}
	}

	@media screen and (min-width: 2560px) {
		.lableNumber {
			font-size: 18px !important;
		}
	}

	.HostInformation {
		padding: 0px 2px;
		height: calc(100% - 22px - 8px);
		text-align: center;
		color: aliceblue;
	}

	.hostLine-box {
		border: 1px solid rgb(4, 44, 119);
	}

	.hostEcharts-box {
		height: 50%;
	}

	.basicImformation {
		background-color: rgba(0, 0, 0, 0);
	}

	.oneLable {
		padding-left: 4%;
		font-size: smaller;
	}

	.oneLable>>>.el-form-item__content {
		width: 50%;
		float: none;
	}

	.oneLable>>>.el-form-item__label {
		color: aliceblue;
		padding: 4px;
		text-align: justify;
	}

	.oneLable>>>.el-form-item--mini.el-form-item,
	.el-form-item--small.el-form-item {
		margin-bottom: 0px;
		margin-right: 0px;
	}

	.hostEcharts {
		height: 100%;
	}

	.memory {
		height: 98%;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	.CPU {
		margin-bottom: 10px !important;
		min-height: 98px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
	}

	.butomLable {
		border: 0.5px solid rgb(4, 44, 119);
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.butomLable>>>.el-form-item__label {
		padding: 0 0 0 5px;
		color: aliceblue;
	}

	.profile {
		padding-left: 0px !important;
		padding-right: 0px !important;
	}

	.lableNumber {
		color: aliceblue;
		width: auto;
		padding-top: 2%;
		text-align: center;
	}

	.text {
		padding-left: 0px !important;
		padding-right: 0px !important;
		height: 24px;
		padding-top: 4px;
	}

	.data {
		padding-left: 0px !important;
		padding-right: 0px !important;
		height: 24px;
		padding-top: 4px;
	}

	.itemStart {
		display: flex;
		justify-content: flex-start;
	}
</style>
